※ 今天的內容

一、為踏入前端開發學css框架的小通
二、怎麼開始使用Bootstrap：官方文件、別人的技術文章或影片
三、把文件當學習手冊，總是覺得學習效率不好：從需求的角度擬定方向
四、總是聽到別人說Bootstrap 長的一樣？學習客製框架預設的樣式
五、現代JS框架相依的CSS框架風格 (component + utility)
六、總結
七、延伸學習資源

一、為踏入前端開發學css框架的小通

小通想要了解前端工程師需要具備哪些技術技能
到各大求職平台搜尋了「前端工程師」
發現幾乎都要會CSS Framework
可是他只知道Quasar阿...

小通準備開始學習Bootstrap
但這個時候，小通心中出現了以下幾個學習問題

二、怎麼開始使用Bootstrap：官方文件、別人的技術文章或影片

旁邊的大變跟小通說：「你可以參考Bootstrap的官方文件」
小通打開了官方文件後，問了旁邊的大變：「我不知道這幾種方式的差別？」

Compiled CSS and JS
在真實的網站上，通常會使用壓縮優化過的Bootstrap CSS和JS，減少頁面載入的時間

Source files
Bootstrap 原汁原味的程式碼，給開發者深入了解Bootstrap 底層的程式碼

BootstrapCDN
透過Bootstrap CDN服務，分散從伺服器載入檔案的網路請求的負荷
詳情可以參考這篇

Package managers
有別於前三者的不同，用於Webpack的開發方式，且能使用Sass Complier進行樣式的客製開發

......................

三、把文件當學習手冊，總是覺得學習效率不好：從需求的角度擬定方向

小通很認真的翻閱「Bootstrap」的官方文件每一頁內容
才翻不到幾頁，小通就跟大便說：「我記不住所有的東西啊」
大便跟小通說：「文件是讓你來邊查邊學的，不是讓你來一字一句慢漫啃的」

.....................
首先可以思考，當你要製作一個前端頁面時，需要處理哪些問題？
找三種常見版型搭配練習，熟悉前端常用的元件：形象類的網站首頁版型、內容管理的清單與表單版型、社群網站的前台版型

像是IT幫幫忙的網頁，你要怎麼用Bootstrap實作出來

1. 初始化標籤預設的樣式: reset 或 normalize (Bootstrap Reboot)
   例如：所有文字的預設大小和字型、超連結的底線及顏色，每個標籤的Margin 與 Padding

2. 區塊的排版和對齊：Layout (container、flex-grid)、Float、Flex、Position
   例如: 在不同解析度，容器要不要滿版，每個區塊要顯示幾個、要不要顯示、區塊的水平與垂直對齊

3. 內容呈現的樣式：文字(層級Typography、對齊粗體斜體 text utilities、顏色 color utilities) 、影音(embed)、圖片(Images、Figures)

4. 元件：常見頁面區塊(Navbar、Breadcrumb、Carousel、Card)、表格(Table、Pagination)按鈕(Buttons)、表單(Forms、Input Group、Alerts)、視窗(Modal) 、其他

5. 其他常用的樣式設定：間距 (Spacing)、定位類型(Position)、邊框(Border)

查找文件時，先從範例看起，再從範例的式碼了解不同的使用情境
有些框架或套見的文件範例不一定寫得很清楚，如果看不懂的話，可以從別人的技術文章或教學影片

四、總是聽到別人說Bootstrap 長的一樣？學習客製框架預設的樣式

除了昨天說到的，覆寫原本的css的方式來客製樣式
Bootstrap 和 Tailwind 都有提供客製預設樣式的作法
Bootstrap 的樣式客製設定需仰賴Sass
Tailwind的樣式客製設定需仰賴PostCSS

五、現代JS框架相依的CSS框架風格 (component + utility)

直接在框架可以直接套用的CSS class，用來調整標籤元件的樣式
這些css類別稱之為 utility-class
例如：.mt-0、border-primary

除了Bootstrap，大多數的前端CSS框架也都是 component + utility
提供主要的元件樣式，必要時可以使用框架提供的margin、padding、flexbox 等等
像是Vue的Vuetify、React的material-ui、Angular的PrimeNG
若樣式框架沒有，在撰寫非常少量的CSS

而 Tailwind 算是比較少數的 utility-first CSS Framework
全部的樣式和media query都套用框架提供的css class

<button type="button" class="bg-blue-600 text-gray-200 rounded px-2 py-1">Primary</button>

在Tailwind 實現 Bootstrap 的作法可參考這個網站

六、總結

其實不論使用哪一套CSS 框架
在學習時，可以掌握三個需求重點：

1. 安裝方式：CDN引入、原始碼引入、Webpack
2. 切版、元件、樣式微調：常用的CSS和元件
3. 樣式客製，CSS 預處理器的使用方式

今天即使你在A公司使用Quasar，到B公司要用別的CSS Framework
你也可以很快速的上手並轉換

有的人會比較希望有老師或教學可以跟隨
可以去找針對切版流程實作的教學或課程

例如，六角學院的「網頁切版直播班」這類的課程　(非業配，純粹認同這類課程的理念)

七、相關鐵人賽系列文章

1. 六角的廖大大的CSS優良部分
2. CSSCoke的Bootstrap 5 金魚都能懂的Bootstrap5網頁框架開發